<template>
  <div>
    <!-- 搜索表单 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="querySpe">
          <el-form-item label="规格名称">
            <el-input v-model="querySpe.speName" placeholder="规格名称" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="querySpe.status" placeholder="全部" clearable>
              <el-option label="全部" value="0" />
              <el-option label="正常" value="1" />
              <el-option label="禁用" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 功能按钮 开始 -->
    <el-row>
      <el-col :span="24">
        <el-button style="margin: 5px 5px" type="primary"
          ><el-icon><EditPen /></el-icon>编辑</el-button
        >
        <el-button style="margin: 5px 5px" type="danger"
          ><el-icon><Delete /></el-icon>删除</el-button
        >
        <el-button
          @click="showSaveDialog"
          style="margin: 5px 5px"
          type="success"
          ><el-icon><Plus /></el-icon>新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表开始 -->
    <el-row>
      <el-col :span="24">
        <el-table
          :data="spes"
          max-height="800"
          style="width: 100%"
          :stripe="true"
          :border="true"
          :fit="true"
          ref="speTable"
        >
          <el-table-column align="center" type="selection" />
          <el-table-column align="center" prop="speId" label="编号" />
          <el-table-column align="center" prop="speName" label="规格名称">
            <template #default="scope">
              <el-link @click="showEntryList(scope.row.speId)" type="primary">{{
                scope.row.speName
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="speDesc" label="规格说明" />

          <el-table-column align="center" prop="createTime" label="创建时间" />
          <el-table-column align="center" prop="modifyTime" label="修改时间" />
          <!-- 这里使用formatter绑定一个函数，用来格式化结果 -->
          <el-table-column align="center" prop="dictStatus" label="状态">
            <!-- 使用了table-column的插槽，显示对应的标签 -->
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" class="ml-2" type="success"
                >正常</el-tag
              >
              <el-tag class="ml-2" type="danger" v-else>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!-- 这里写的内容会放在默认的插槽中 -->
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格结束 -->
      </el-col>
    </el-row>
    <!-- 分页栏开始 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          :page-size="limit"
          :total="total"
          layout="prev, pager, next, jumper, ->, total"
          @currentChange="handlerCurrentChange"
        ></el-pagination>
      </el-col>
    </el-row>
    <!-- 新增规格的弹窗 -->
    <el-dialog v-model="dialogSaveSpeVisible" title="添加规格信息">
      <!-- 添加字典的表单 开始 -->
      <el-form :model="newSpe">
        <el-form-item label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="newSpe.speName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="规格说明" :label-width="formLabelWidth">
          <el-input v-model="newSpe.speDesc" autocomplete="off" />
        </el-form-item>
      </el-form>
      <!-- 添加字典的表单 结束 -->
      <template #footer>
        <span class="dialog-footer">
          <!-- 将显示窗体的属性修改为false的同时，将newUser置空 -->
          <el-button
            @click="
              dialogSaveSpeVisible = false;
              this.newSpe = {};
            "
            >取消</el-button
          >
          <el-button type="primary" @click="doSaveSpe"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 规格项列表弹窗 -->
    <el-dialog v-model="dialogEntryListVisible" width="80%" title="规格项列表">
      <!-- 功能按钮 -->
      <el-row>
        <el-col :span="24">
          <el-button style="margin: 5px 5px" type="primary"
            ><el-icon><EditPen /></el-icon>编辑</el-button
          >
          <el-button style="margin: 5px 5px" type="danger"
            ><el-icon><Delete /></el-icon>删除</el-button
          >
          <el-button
            @click="dialogSaveEntryVisible = true"
            style="margin: 5px 5px"
            type="success"
            ><el-icon><Plus /></el-icon>新增</el-button
          >
        </el-col>
      </el-row>
      <!-- 规格项列表 -->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="entrys"
            max-height="800"
            style="width: 100%"
            :stripe="true"
            :border="true"
            :fit="true"
            ref="entryTable"
          >
            <el-table-column align="center" type="selection" />
            <el-table-column align="center" prop="entryId" label="编号" />
            <el-table-column align="center" prop="entryText" label="文本" />
            <el-table-column align="center" prop="entryImg" label="图片">
              <template #default="scope">
                <el-image
                  v-if="scope.row.entryImg"
                  style="height: 50px"
                  :src="scope.row.entryImg"
                  :zoom-rate="1.2"
                  fit="cover"
                />
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="createTime"
              label="创建时间"
            />
            <el-table-column
              align="center"
              prop="modifyTime"
              label="修改时间"
            />
            <!-- 这里使用formatter绑定一个函数，用来格式化结果 -->
            <el-table-column align="center" prop="dictStatus" label="状态">
              <!-- 使用了table-column的插槽，显示对应的标签 -->
              <template #default="scope">
                <el-tag v-if="scope.row.status == 1" class="ml-2" type="success"
                  >正常</el-tag
                >
                <el-tag class="ml-2" type="danger" v-else>禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <!-- 这里写的内容会放在默认的插槽中 -->
              <template #default="scope">
                <el-button size="small" @click="entryHandleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="entryHandleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 表格结束 -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            :page-size="entryLimit"
            :total="entryTotal"
            layout="prev, pager, next, jumper, ->, total"
            @currentChange="handlerCurrentChange"
          ></el-pagination>
        </el-col>
      </el-row>
      <!-- 添加字典的表单 结束 -->
      <template #footer>
        <span class="dialog-footer">
          <!-- 将显示窗体的属性修改为false的同时，将newUser置空 -->
          <el-button @click="dialogEntryListVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加规格项的弹窗 -->
    <el-dialog v-model="dialogSaveEntryVisible" title="添加规格项">
      <!-- 添加规格项的表单 开始 -->
      <el-form :model="newEntry">
        <el-form-item label="条目文本" :label-width="formLabelWidth">
          <el-input v-model="newEntry.entryText" autocomplete="off" />
        </el-form-item>
        <el-form-item label="条目图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :disabled="false"
            action="http://localhost:11011/cms/upload"
            name="uploadFile"
            :on-success="uploadSuccess"
            :multiple="false"
          >
            <img
              height="300"
              width="300"
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 添加字典的表单 结束 -->
      <template #footer>
        <span class="dialog-footer">
          <!-- 将显示窗体的属性修改为false的同时，将newUser置空 -->
          <el-button
            @click="
              dialogSaveEntryVisible = false;
              this.newEntry = {};
            "
            >取消</el-button
          >
          <el-button type="primary" @click="doSaveEntry"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import speHttp from "../../api/item-spe.js";

export default {
  data() {
    return {
      spes: [], // spe数据列表
      querySpe: {}, // 搜索数据对象
      dialogSaveSpeVisible: false, // 添加spe的弹窗标记
      currentPage: 1, // 当前页面
      limit: 10, // 每页大小
      total: 0, //总条数
      dialogSaveSpeVisible: false, // 新增规格的弹窗标记
      newSpe: {}, // 新增规格对象
      dialogEntryListVisible: false, // 规格项列表弹窗标记
      entrys: [], // 保存规格项的列表数据
      entryCurrentPage: 1, // 规格项列表的当前页码
      entryLimit: 10, // 规格项列表的每页大小
      entryTotal: 0, // 规格项列表的总条数
      dialogSaveEntryVisible: false, // 添加规格项的弹窗标记
      newEntry: {}, // 保存新增的规格项数据
      imageUrl: "", // 上传规格项的图片之后的图片访问地址
    };
  },
  methods: {
    // 新增规格项
    doSaveEntry() {
      speHttp.saveEntry(this.newEntry, (res) => {
        if (res.code == "200") {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.dialogSaveEntryVisible = false;
          this.loadEntry(this.newEntry.speId);
          this.newEntry = {};
        } else if (res.code == "300") {
          this.$message({
            type: "error",
            message: res.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败",
          });
        }
      });
    },
    /**
     * 图片上传成功的回调
     */
    uploadSuccess(res) {
      this.imageUrl = res.msg;
      this.newEntry.entryImg = res.msg;
    },
    /**
     * 新增规格项的功能按钮事件
     */
    showSaveEntryDialog() {},
    /**
     * 加载并且显示规格项列表
     */
    showEntryList(speId) {
      // 将选中的规格编号设置到要新增的规格项中
      this.newEntry.speId = speId;
      this.dialogEntryListVisible = true;
      this.loadEntry(speId);
    },
    /**
     * 根据规格编号加载规格项的列表信息
     */
    loadEntry(speId) {
      speHttp.queryEntryByPage(
        speId,
        this.entryCurrentPage,
        this.entryLimit,
        (res) => {
          console.log(res);
          this.entrys = res.data.records;
          this.entryTotal = res.data.total;
        }
      );
    },
    /**
     * 新增规格的提交按钮事件
     */
    doSaveSpe() {
      speHttp.save(this.newSpe, (res) => {
        if (res.code == "200") {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.dialogSaveSpeVisible = false;
          this.newSpe = {};
          this.loadSpe();
        } else if (res.code == "300") {
          this.$message({
            type: "error",
            message: res.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败",
          });
        }
      });
    },
    // 行删除事件
    handleDelete(row) {},
    // 行编辑
    handleEdit(row) {},
    /**
     * 新增按钮的事件
     */
    showSaveDialog() {
      this.dialogSaveSpeVisible = true;
    },
    /**
     * 加载规格列表的方法
     */
    loadSpe() {
      speHttp.queryByPage(
        this.querySpe,
        this.currentPage,
        this.limit,
        (res) => {
          console.log(res);
          this.spes = res.data.records;
          this.total = res.data.total;
        }
      );
    },
  },
  mounted() {
    this.loadSpe();
  },
};
</script>

<style scope>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>